<template>
    <mt-loadmore :bottom-method="bottomMethod" @bottom-status-change="handleBottomChange"
                 :bottom-all-loaded="bottomAllLoaded"
                 :auto-fill="autoFill" :ref="refName">
        <slot></slot>
        <div slot="bottom" class="mint-loadmore-bottom">
            <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↑</span>
            <span v-show="topStatus === 'loading'">加载中...</span>
        </div>
    </mt-loadmore>
</template>

<script>
    export default {
        name: '',
        data() {
            return {
                topStatus: '',
                bottomAllLoaded: false
            }
        },
        props: {
            allLoaded: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            autoFill: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            refName: {
                type: String,
                default: () => {
                    return 'loadmore'
                }
            }
        },
        watch: {
            allLoaded(val) {
                this.bottomAllLoaded = val
            }
        },
        mounted() {

        },
        methods: {
            bottomMethod() {
                let _this = this
                this.$emit('bottomMethod', () => {
                    _this.$refs[this.refName].onBottomLoaded()
                })
            },
            handleBottomChange(status) {
                this.topStatus = status
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">

</style>
